<template>
	<div class="transfer-page">
		<back title="转账"></back>
		<div class="transfer-content">
			<div class="transfer-form">
				<div class="input-form">
					<cube-input type="number" v-model="phone" placeholder="请输入转入手机号"></cube-input>
				</div>
				<div class="input-form">
					<cube-input type="password" v-model="pwd" placeholder="请输入交易密码"></cube-input>
					<p v-if="TransferPwd">您未<router-link to="/security" style="color:rgb(45, 114, 208);">设置</router-link>交易密码</p>
				</div>
				<div class="input-form">
					<cube-input type="number" v-model="money" placeholder="请输入转账金额"></cube-input>
				</div>
			</div>
			<div class="login-btn">
				<button type="button" class="submit" @click="submit"><cube-loading v-show="loading"></cube-loading>确定</button>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data(){
			return{
				phone:'',
				pwd:'',
				money:'',
				loading:false,
				loginfag:true,
				TransferPwd:true
			}
		},
		created(){
			this.existsTransferPwd();
			this.phone = this.$route.query.phone || ''
		},
		methods:{
			existsTransferPwd(){
				this.$http.get(`/MyInfo/existsTransferPwd`).then(res => {
					if(res.code == 404){
						this.TransferPwd = false;
					}
				})
			},
			submit(){
				if(!this.phone || !this.pwd || !this.money){
					this.createToast('表单不能为空','error')
					return;
				}
				if(!this.loginfag) return;
				this.loginfag = false;
				this.loading = true;
				this.$http.get(`/MyInfo/transferMoney`,{
					mobile:this.phone,
					transferPwd:this.pwd,
					money:this.money
				}).then( res => {
					console.log(res)
					if(res.code == 200){
						this.createToast(res.msg,'correct')
						this.money = ''
						this.pwd = ''
					}else if(res.code == 206){
						this.createToast(res.msg,'error')
						setTimeout(() => {
							this.$router.push('/security')
						}, 1500);
					}else{
						this.createToast(res.msg,'error')
					}
					this.loginfag = true;
					this.loading = false;
				})
			},
			createToast(text,type){
				const toast = this.$createToast({
					time: 1000,
					txt: text,
					type:type
				})
				toast.show()
			}
		}
	}
</script>

<style lang="stylus">
	.transfer-page{
		padding-top:50px;
		background:#f7f7f7;
		.transfer-content{
			.transfer-form{
				padding:20px;
				.input-form{
					background:#fff;
					margin-bottom:20px;
					padding:5px;
					.cube-input::after{
						border:0;
					}
					p{
						font-size:12px;
						color:red;
						padding:0 5px;
					}
				}
			}
			.submit{
				background-image: linear-gradient(to bottom, #0392b7, #3563db)
				color #ffffff
				width 90%
				margin 0 auto
				height 40px
				border 0
				outline none 
				border-radius 5px
				margin-top 20px
				display flex
				align-items center
				justify-content center
				font-size:16px;
			}
		}
	}
</style>
